<template>
  <div class="page-container">
    <page-filter-component @filter-form-submit="fetchTableData()">
      <template v-slot:header-opt>
        <el-button size="small" type="primary" @click="showAddDialog({})" :disabled="user.role_id != 1">
          新增账户
        </el-button>
      </template>
      <template v-slot:body>
        <el-form-item label="用户名">
          <el-input v-model="filterForm.u_name" clearable />
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="filterForm.u_account" clearable />
        </el-form-item>
      </template>
    </page-filter-component>

    <el-card class="table-card">
      <div class="table-container">
        <el-table
          size="mini"
          stripe
          :data="tableData.list"
          class="el-table--scrollable-y"
        >
          <el-table-column label="ID" prop="u_id"></el-table-column>
          <el-table-column label="用户名" prop="u_name"></el-table-column>
          <el-table-column label="账号" prop="u_account"></el-table-column>
          <el-table-column label="角色" prop="role.role_name"></el-table-column>
          <el-table-column
            label="身份"
            prop="u_level"
            :formatter="matchTableFieldLabelLevel"
          />
          <el-table-column label="状态">
            <template slot-scope="scope">
              <el-tag
                v-if="scope.row.u_status === 1"
                type="success"
                size="mini"
              >
                有效
              </el-tag>
              <el-tag v-if="scope.row.u_status === 0" type="danger" size="mini">
                无效
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button
                type="text"
                size="mini"
                icon="el-icon-sort"
                @click="showLevelEditDialog(row)"
                :disabled="user.role_id != 1"
              >修改身份</el-button>
              <el-button
                type="text"
                size="mini"
                icon="el-icon-sort"
                @click="resetPassword(row)"
                :disabled="user.role_id != 1"
              >重置密码</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="table-pagination">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="tableData.page"
          :page-size="tableData.pageSize"
          :total="tableData.total"
          @current-change="onPageChanged"
          @size-change="onPageSizeChanged"
        ></el-pagination>
      </div>
    </el-card>

    <el-dialog :visible.sync="adminUserDialog">
      <el-form label-position="right" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户名" required>
              <el-input v-model="selection.u_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色" required>
              <el-select v-model="selection.role_id">
                <el-option
                  v-for="role in roles"
                  :label="role.role_name"
                  :value="role.role_id"
                  :key="role.role_id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="账号" required>
              <el-input v-model="selection.u_account"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码" required>
              <el-input v-model="selection.u_password"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer">
        <el-button type="primary" @click="onSubmitAdminUser()">提交</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="levelEditDialog" :title="`修改${selection.u_name}的身份`" width="230px">
      <el-select v-model="selection.u_level" size="mini">
        <el-option
          v-for="opt in levelOptions"
          :value="opt.value"
          :label="opt.label"
          :key="`level-options-${opt.value}`"
        ></el-option>
      </el-select>
      <div slot="footer">
        <el-button type="primary" size="mini" @click="onEditLevel()">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import index from './index.js';

export default index;
</script>

<style scoped lang="less">
@import './index.less';
</style>
